{% extends 'base.html' %}

{% load staticfiles %}

{% block custom_css %}
    <style>
        #id_captcha_1 {
            width: 50%;
            margin-right: 10px;
        }
    </style>
{% endblock %}

{% block title %}找回密码-学厨网{% endblock %}

{% block content %}
    <div class="container mycontent" style="padding-top: 80px;">
        <div class="col-sm-6 col-lg-6 col-lg-offset-3" style="padding: 0px 40px 40px;">
            {% if msg %}
                <div class="alert alert-danger" role="alert">{{ msg }}</div>
            {% endif %}
            <div class="page-header">
                <h3>找回密码</h3>
            </div>
            <form action="{% url 'forget_pwd' %}" method="post" autocomplete="off">
                <div class="input-group input-group-lg" style="margin-top: 20px;">
                    <span class="input-group-addon" id="basic-addon1">邮&nbsp;&nbsp;&nbsp;箱</span>
                    {{ form.email }}
                </div>
                 <div class="input-group input-group-lg" style="margin-top: 30px;">
                    <span class="input-group-addon yanzengma" id="basic-addon1">验证码</span>
                    {{ form.captcha }}
                </div>

                {% csrf_token %}
                <button type="submit" class="btn btn-primary btn-lg center-block"
                        style="margin-top: 30px;width: 100%;"id="login_butten">提交
                </button>

            </form>
        </div>
    </div>
    <script>
        $(function () {
            $('.captcha').css({
                'cursor': 'pointer'
            })
            $('.captcha').click(function () {
                console.log('click');
                $.getJSON("/captcha/refresh/",
                    function (result) {
                        $('.captcha').attr('src', result['image_url']);
                        $('#id_captcha_0').val(result['key'])
                    });
            });
        })
    </script>

{% endblock %}